<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>CSS3 - Snow</title>
        
        <style>
        
        body {
            height: 1000px;
            
            background: -webkit-linear-gradient(top, #1f2273 0%, #000000 100%);
            background: linear-gradient(top, #1f2273 0%, #000000 100%);
        }
        
        h1 {
            color: white;
        }
        
        .snow {
            width: 20px;
            height: 20px;
            position: absolute;
            background: -webkit-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
            background: radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
        }
        
        .snow-00 { -webkit-animation: snow-00 15s infinite; }
        @-webkit-keyframes snow-00 {
            0%  { -webkit-transform: translate(100px, -100px) scale(1); }
            100%{ -webkit-transform: translate(400px, 1000px) scale(1); }
        }
        
        .snow-01 { -webkit-animation: snow-01 10s infinite; }
        @-webkit-keyframes snow-01 {
            0%  { -webkit-transform: translate(   0px, -100px) scale(1.5); }
            100%{ -webkit-transform: translate(-300px, 1000px) scale(1.5); }
        }
        
        .snow-02 { -webkit-animation: snow-02 5s infinite; }
        @-webkit-keyframes snow-02 {
            0%  { -webkit-transform: translate(  0px, -100px) scale(2.0); }
            100%{ -webkit-transform: translate(100px, 1000px) scale(2.0); }
        }
        
        </style>
        
        <script>
        
        var MAX_SNOW_NUM = 256; // 生成する雪の上限
        var CREATE_SPEED = 100; // 生成スピード
        
        window.onload = function()
        {
            // ベースとなる雪エレメントを生成
            var original_snow = document.createElement("div");
            original_snow.classList.add("snow");
            
            // 雪の数
            var snow_num = 0;
            
            // 雪を生成
            setTimeout(function(){
                ++snow_num;
                // 雪エレメントを複製
                var snow = original_snow.cloneNode(true);
                // ランダムな位置に配置(X軸のみ)
                var left = Math.floor( Math.random()*window.innerWidth );
                snow.style.left = left + "px";
                // アニメーション用 snow-0? クラスを作成(最後の数字はランダムで 0~2)
                snow.classList.add("snow-0" + Math.floor( Math.random()*3 ));
                // ボディエレメントに雪エレメントを追加
                document.body.appendChild(snow);
                // 上限に達するまで繰り返す
                if (snow_num < MAX_SNOW_NUM) {
                    setTimeout(arguments.callee, CREATE_SPEED);
                }
            }, CREATE_SPEED);
        }
        
        </script>
        
    </head>
    
    <body>
        
        <h1>CSS3 - Snow</h1>
        
    </body>
</html>